<template>
    <div class="car">

        <div class="contain">
            <div class="title2"><h1>购物车</h1> <h2 style="text-align: center; line-height: 3rem;">用户名:</h2></div>
            
            <div class="title1">
                <div><input type="checkbox" style="font-weight: 700;" @change="f_selectAll()" :checked="checkedAll"
                        class="checkall">&nbsp;全选</div>
                <div>商品名称</div>
                <div>商品价格</div>
                <div>商品详情</div>
                <div>操作</div>
            </div>
            <div class="top1" v-for="(item, index) in goods" :key="index">
                <div class="list">
                    <div><input type="checkbox" @click="f_select(item)" :checked="item.choose"></div>

                    <div>{{ item.name }}</div>

                    <div>{{ item.price }}元</div>
                    <div class="list2">


                        好运来是打发士大夫阿萨打发士大夫阿萨德奥德打发士大夫阿萨德奥德打发士大夫打发士大夫阿萨德奥德打发士大夫阿萨德奥德打发士大夫阿萨德奥德打发士大夫阿萨德奥德阿萨德奥德

                    </div>
                    <div><el-button type="danger" plain class="del" @click="f_delect(item, index)">删除</el-button></div>
                </div>
            </div>

            <div class="footer">
                <div>总价：{{ total }}元</div>
                <div> <el-button @click="sumit" type="success">提交订单</el-button></div>
            </div>

        </div>


    </div>
</template>


<script setup>
import axios from "axios"
import { ref, reactive } from "vue"
import { useRouter } from "vue-router"
let total = ref(0)
let checkedAll = ref(false)
const Router = useRouter()
function sumit() {

    Router.push({ name: "shopdetail" })


}
axios({
    url: "http://172.20.35.148:8888/getAllGoods",
    method: "GET"

}).then((res) => {

    console.log("getAllGoods", res.data);
})

axios({
    url: "http://172.20.35.148:8888/getUser",
    method: "GET"

}).then((res) => {

    console.log("getUser", res.data);
})
axios({
    url: "http://172.20.35.148:8888/getMyCar",
    method: "GET"

}).then((res) => {

    console.log("getMyCar", res.data);
})





const goods = reactive([
    {
        name: '苹果',
        price: 1,
        count: 1,
        choose: false
    },
    {
        name: '梨',
        price: 5,
        count: 1,
        choose: false
    },
    {
        name: '香蕉',
        price: 20,
        count: 1,
        choose: false
    },
    {
        name: '西瓜',
        price: 10,
        count: 1,
        choose: false
    },
    {
        name: '橘子',
        price: 2,
        count: 1,
        choose: false
    }
])


//全选
function f_selectAll() {
    checkedAll.value = !checkedAll.value
    if (checkedAll.value) {
        total.value = 0
        goods.forEach(item => {
            item.choose = true
            total.value += item.price * item.count
        });
    } else {
        goods.forEach(item => {
            item.choose = false
        });
        total.value = 0
    }
}
//选中
function f_select(item) {
    item.choose = !item.choose
    if (item.choose) {
        total.value += item.price * item.count
    } else {
        total.value -= item.price * item.count
    }
    //判断全选
    checkedAll.value = goods.every(item => item.choose)
}
//数量增加
function f_add(item) {
    item.count += 1
    if (item.choose) {
        total.value += item.price
    }
}
//数量减少
function f_minus(item) {
    if (item.count == 1) {
        alert('数量不能小于1')
        return false
    }
    item.count -= 1
    if (item.choose) {
        total.value -= item.price
    }
}
//删除
function f_delect(item, index) {

    if (confirm("are you sure?")) {
        if (item.choose) {
            item.choose = false
            total.value -= item.price * item.count
        }
        goods.splice(index, 1)
    }
}











</script>

<style lang="scss" scoped>
.contain {
    width: 80vw;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    // align-items: center;
    text-align: center;
    // border: 1px rgb(228, 227, 227) solid;

}

.car {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #FFFFFF;
}

.title1 {
    display: flex;
    font-size: 16px;
    justify-content: space-evenly;
    border: 1px rgb(150, 150, 150) solid;
    background-color: rgb(49, 86, 129);
    color: #FFFFFF;
    // margin-bottom: 1rem;

    div {
        font-weight: 700;
        width: 4rem;
        height: 2rem;
        // text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.title2{
    // width: 20rem;
    height: 5rem;
    display: flex;
    justify-content: space-evenly;
    background-color: #FFFFFF;
    // margin-top: 0.5rem;
    border: 1px rgb(228, 227, 227) solid;
    border-bottom: none;
    // background-color: #909090;

}
.list {

    height: 5rem;
    display: flex;
    justify-content: space-evenly;
    background-color: #FFFFFF;
    // margin-top: 0.5rem;
    border: 1px rgb(228, 227, 227) solid;
    border-bottom: none;

    &:hover {

        // box-shadow: 0px 0px 6px 0px #ebebeb;
        // border: 1px rgb(209, 209, 209) solid;
        background-color: #e0e0e0;
    }

    div {

        width: 7rem;
        display: flex;
        justify-content: center;
        align-items: center;

    }
}

.list2 {
    width: 7rem;
    display: flex;
    // justify-content: space-evenly;
    justify-content: center;
    align-items: center;
    font-size: 12px;

    // height: 50px;
    // border: 1px solid pink;
    // width: 200px;
    // word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;  //显示几行
    overflow: hidden;

}

.footer {
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px rgb(228, 227, 227) solid;

    div {
        margin-right: 1rem;
        margin-top: 1rem;
    }
}
</style>